<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			[v-cloak] {
				display: none;
			}
		</style>
		<!-- 2. 引入 vue.js -->
		<script src="./scripts/vue.js"></script>
	</head>

	<body>
		<!-- 
        指令 ： 就是自定义属性，是vue本身就提供的
          使用方式：将自定义指令当成属性使用即可
          
        v-cloak：
          解决问题：插值表达式闪烁问题
          原理：将属性写到元素位置，使用display将元素隐藏
               当插值表达式数据解析渲染好之后，vue会在内存中将v-cloak移除
    -->

		<div id="box">
			<p v-cloak>姓名：{{ name }}</p>
			<p v-cloak>年龄：{{ age }}</p>
			<p v-cloak>性别：{{ sex }}</p>
		</div>

		<script src="/scripts/vue.js"></script>

		<script>
			var vm = new Vue({
				el: '#box',
				data: {
					name: 'zs',
					age: '20',
					sex: 'male',
				},
			})
		</script>
	</body>
</html>
